/*弹性盒子居中（传入null不设置该属性）*/
@mixin flex-center(
  $direction: row,
  $justify: center,
  $align: center,
  $flex-wrap: null
) {
  display: -webkit-flex;
  display: flex;
  @if ($direction!=null) {
    flex-direction: $direction;
  }
  @if ($justify!=null) {
    justify-content: $justify;
  }
  @if ($align!=null) {
    align-items: $align;
  }
  @if ($flex-wrap != null) {
    flex-wrap: $flex-wrap;
  }
}

/*绝对定位  参数顺序：上右下左*/
@mixin positionAbsolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;
  @if ($left!= "" & & $left!=null) {
    left: $left;
  }
  @if ($right!= "" & & $right!=null) {
    right: $right;
  }
  @if ($top!= "" & & $top!=null) {
    top: $top;
  }
  @if ($bottom!= "" & & $bottom!=null) {
    bottom: $bottom;
  }
}

/*左浮动*/
@mixin float-left($width: 19%, $margin-right: 1.2%) {
  width: $width;
  float: left;
  @if ($margin-right!=null) {
    margin-right: $margin-right;
  }
}

/*右浮动*/
@mixin float-Right($width: 19%, $margin-left: 1.2%) {
  width: $width;
  float: right;
  @if ($margin-left!=null) {
    margin-left: $margin-left;
  }
}

/* 圆形盒子 */
@mixin circle($size: 11px, $bg: #fff) {
  border-radius: 50%;
  width: $size;
  height: $size;
  line-height: $size;
  text-align: center;
  background: $bg;
}

/* 文本阴影 */
@mixin text-show(
  $h-shadow: 0px,
  $v-shadow: 0px,
  $blur: 10px,
  $color: rgba(0, 180, 255, 0.7)
) {
  text-shadow: $h-shadow $v-shadow $blur $color;
}

/* 定义滚动条样式 圆角和阴影不需要则传入null */
@mixin scrollBar(
  $width: 10px,
  $height: 10px,
  $outColor: $bgColor,
  $innerColor: $bgGrey,
  $radius: 5px,
  $shadow: null
) {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }
    @if ($radius!=null) {
      border-radius: $radius;
    }
    background-color: $outColor;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }
    @if ($radius!=null) {
      border-radius: $radius;
    }
    background-color: $innerColor;
    border: 1px solid $innerColor;
  }
}

/* 多行文本溢出默认2行*/
@mixin multi-ellipsis($line: 2) {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

/* css3动画 默认3s宽度到200px */
@mixin animation(
  $from: (
    width: 0px,
  ),
  $to: (
    width: 200px,
  ),
  $name: mymove,
  $animate: mymove 2s 1 linear infinite
) {
  -webkit-animation: $animate;
  -o-animation: $animate;
  animation: $animate;
  @keyframes #{$name} {
    from {
      @each $key, $value in $from {
        #{$key}: #{$value};
      }
    }
    to {
      @each $key, $value in $to {
        #{$key}: #{$value};
      }
    }
  }

  @-webkit-keyframes #{$name} {
    from {
      @each $key, $value in $from {
        $key: $value;
      }
    }
    to {
      @each $key, $value in $to {
        $key: $value;
      }
    }
  }
}
